<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>多选框 Checkbox | Vue Amazing UI</title>
    <meta name="description" content="Amazing UI 组件库">
    <link rel="preload stylesheet" href="/vue-amazing-ui/assets/style.c92aeb20.css" as="style">
    
    <script type="module" src="/vue-amazing-ui/assets/app.2703d87f.js"></script>
    <link rel="preload" href="/vue-amazing-ui/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/framework.8dab348a.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/theme.efad120a.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/effect-fade.3fc1bc0e.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/index.11fe8007.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/guide_components_checkbox.md.74f90463.lean.js">
    <link rel="icon" type="image/svg+xml" href="https://cn.vitejs.dev/viteconf.svg">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/vue-amazing-ui/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vue-amazing-ui/amazing-icon.svg" alt data-v-8426fc1a><!--]--><!--[-->Vue Amazing UI<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vue-amazing-ui/guide/features.html" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>组件</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-amazing-ui/utils/started.html" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>工具</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-9c007e85><span class="text" data-v-9c007e85><!----><span data-v-9c007e85>链接</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-9c007e85><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://github.com/themusecatcher" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->My Github<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://blog.csdn.net/Dandrose?type=blog" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->My CSDN<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://themusecatcher.github.io/front-end-notes/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Front-end Notes<!--]--></a></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><!----><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://cn.vuejs.org/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->vue<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://vitepress.dev/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->vitepress<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://markdown.com.cn/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->markdown<!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themusecatcher/vue-amazing-ui" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themusecatcher/vue-amazing-ui" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>指引</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/features.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>特性</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/started.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>快速上手</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>组件</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/alert.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>警告提示 Alert</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/avatar.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>头像 Avatar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/backtop.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>回到顶部 BackTop</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/badge.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>徽标数 Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/breadcrumb.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>面包屑 Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/button.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>按钮 Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/card.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>卡片 Card</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/carousel.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>走马灯 Carousel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/cascader.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>级联选择 Cascader</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/checkbox.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>多选框 Checkbox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/collapse.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>折叠面板 Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/countdown.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>倒计时 Countdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/datepicker.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>日期选择 DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/descriptions.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>描述列表 Descriptions</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/dialog.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>对话框 Dialog</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/divider.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分割线 Divider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/drawer.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>抽屉 Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/ellipsis.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文本省略 Ellipsis</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/empty.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>空状态 Empty</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/flex.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>弹性布局 Flex</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/grid.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>栅格 Grid</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/image.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片 Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/input.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>输入框 Input</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/inputnumber.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数字输入框 InputNumber</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/message.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>全局提示 Message</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/modal.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>信息提示 Modal</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/notification.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>通知提醒 Notification</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/numberanimation.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数值动画 NumberAnimation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/pagination.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页 Pagination</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/popconfirm.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>弹出确认 Popconfirm</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/progress.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进度条 Progress</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/qrcode.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>二维码 QRCode</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/radio.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>单选框 Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/rate.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>评分 Rate</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/result.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>结果 Result</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/select.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>选择器 Select</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/slider.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>滑动输入条 Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/space.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>间距 Space</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/spin.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>加载中 Spin</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/statistic.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>统计数值 Statistic</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/steps.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>步骤条 Steps</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/swiper.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>触摸滑动插件 Swiper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/switch.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>开关 Switch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/table.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>表格 Table</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/tabs.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>标签页 Tabs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/tag.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>标签 Tag</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/textarea.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文本域 Textarea</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/textscroll.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文字滚动 TextScroll</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/timeline.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>时间轴 Timeline</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/tooltip.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文字提示 Tooltip</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/upload.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>上传 Upload</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/video.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>播放器 Video</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/waterfall.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>瀑布流 Waterfall</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _vue-amazing-ui_guide_components_checkbox" data-v-6b87e69f><div data-v-41edf78e><h1 id="多选框-checkbox" tabindex="-1" data-v-41edf78e>多选框 Checkbox<div class="m-backtop" style="bottom:40px;right:40px;display:none;" data-v-05696e1d data-v-05696e1d data-v-41edf78e><!--[--><span class="m-icon" data-v-05696e1d><svg class="u-icon" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink" data-v-05696e1d><g stroke="none" stroke-width="1" fill-rule="evenodd" data-v-05696e1d><g transform="translate(-139.000000, -4423.000000)" fill-rule="nonzero" data-v-05696e1d><g transform="translate(120.000000, 4285.000000)" data-v-05696e1d><g transform="translate(7.000000, 126.000000)" data-v-05696e1d><g transform="translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)" data-v-05696e1d><g transform="translate(4.000000, 2.000000)" data-v-05696e1d><path d="M8,0 C8.51283584,0 8.93550716,0.38604019 8.99327227,0.883378875 L9,1 L9,10.584 L12.2928932,7.29289322 C12.6834175,6.90236893 13.3165825,6.90236893 13.7071068,7.29289322 C14.0675907,7.65337718 14.0953203,8.22060824 13.7902954,8.61289944 L13.7071068,8.70710678 L8.70710678,13.7071068 L8.62544899,13.7803112 L8.618,13.784 L8.59530661,13.8036654 L8.4840621,13.8753288 L8.37133602,13.9287745 L8.22929083,13.9735893 L8.14346259,13.9897165 L8.03324678,13.9994506 L7.9137692,13.9962979 L7.77070917,13.9735893 L7.6583843,13.9401293 L7.57677845,13.9063266 L7.47929125,13.8540045 L7.4048407,13.8036865 L7.38131006,13.7856883 C7.35030318,13.7612383 7.32077858,13.7349921 7.29289322,13.7071068 L2.29289322,8.70710678 L2.20970461,8.61289944 C1.90467972,8.22060824 1.93240926,7.65337718 2.29289322,7.29289322 C2.65337718,6.93240926 3.22060824,6.90467972 3.61289944,7.20970461 L3.70710678,7.29289322 L7,10.585 L7,1 L7.00672773,0.883378875 C7.06449284,0.38604019 7.48716416,0 8,0 Z" data-v-05696e1d></path><path d="M14.9333333,15.9994506 C15.5224371,15.9994506 16,16.4471659 16,16.9994506 C16,17.5122865 15.5882238,17.9349578 15.0577292,17.9927229 L14.9333333,17.9994506 L1.06666667,17.9994506 C0.477562934,17.9994506 0,17.5517354 0,16.9994506 C0,16.4866148 0.411776203,16.0639435 0.9422708,16.0061783 L1.06666667,15.9994506 L14.9333333,15.9994506 Z" data-v-05696e1d></path></g></g></g></g></g></g></svg></span><!--]--></div> <a class="header-anchor" href="#多选框-checkbox" aria-label="Permalink to &quot;多选框 Checkbox&lt;BackTop /&gt;&quot;" data-v-41edf78e>​</a></h1><h2 id="何时使用" tabindex="-1" data-v-41edf78e>何时使用 <a class="header-anchor" href="#何时使用" aria-label="Permalink to &quot;何时使用&quot;" data-v-41edf78e>​</a></h2><ul data-v-41edf78e><li data-v-41edf78e>在一组可选项中进行多项选择时</li><li data-v-41edf78e>单独使用可以表示两种状态之间的切换，和 Switch 类似</li></ul><h2 id="基本使用" tabindex="-1" data-v-41edf78e>基本使用 <a class="header-anchor" href="#基本使用" aria-label="Permalink to &quot;基本使用&quot;" data-v-41edf78e>​</a></h2><div class="m-checkbox" style="max-width: auto; max-height: auto;" data-v-2a033f18 data-v-41edf78e><!--[--><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->北京市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox u-checkbox-checked" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->纽约市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->布宜诺斯艾利斯<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->伊斯坦布尔<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->拜占庭<!--]--></span></div></div><div class="m-checkbox-wrap" style="" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->君士坦丁堡<!--]--></span></div></div><!--]--></div><details class="details custom-block" data-v-41edf78e><summary data-v-41edf78e>Show Code</summary><div class="language-vue vp-adaptive-theme" data-v-41edf78e><button title="Copy Code" class="copy" data-v-41edf78e></button><span class="lang" data-v-41edf78e>vue</span><pre class="shiki github-dark vp-code-dark" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>setup</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>lang</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>import</span><span style="color:#E1E4E8;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#F97583;" data-v-41edf78e>from</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>options</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>value</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span><span style="color:#79B8FF;" data-v-41edf78e>2</span><span style="color:#E1E4E8;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#B392F0;" data-v-41edf78e>watchEffect</span><span style="color:#E1E4E8;" data-v-41edf78e>(() </span><span style="color:#F97583;" data-v-41edf78e>=&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  console.</span><span style="color:#B392F0;" data-v-41edf78e>log</span><span style="color:#E1E4E8;" data-v-41edf78e>(</span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  &lt;</span><span style="color:#FDAEB7;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:options</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>v-model:value</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>setup</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>lang</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>import</span><span style="color:#24292E;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#D73A49;" data-v-41edf78e>from</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#032F62;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>options</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>value</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span><span style="color:#005CC5;" data-v-41edf78e>2</span><span style="color:#24292E;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#6F42C1;" data-v-41edf78e>watchEffect</span><span style="color:#24292E;" data-v-41edf78e>(() </span><span style="color:#D73A49;" data-v-41edf78e>=&gt;</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  console.</span><span style="color:#6F42C1;" data-v-41edf78e>log</span><span style="color:#24292E;" data-v-41edf78e>(</span><span style="color:#032F62;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#24292E;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  &lt;</span><span style="color:#B31D28;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:options</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>v-model:value</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#24292E;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span></code></pre></div></details><h2 id="禁用" tabindex="-1" data-v-41edf78e>禁用 <a class="header-anchor" href="#禁用" aria-label="Permalink to &quot;禁用&quot;" data-v-41edf78e>​</a></h2><div class="m-checkbox" style="max-width: auto; max-height: auto;" data-v-2a033f18 data-v-41edf78e><!--[--><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box disabled" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->北京市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box disabled" data-v-2a033f18><span class="u-checkbox u-checkbox-checked" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->纽约市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box disabled" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->布宜诺斯艾利斯<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box disabled" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->伊斯坦布尔<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box disabled" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->拜占庭<!--]--></span></div></div><div class="m-checkbox-wrap" style="" data-v-2a033f18><div class="m-box disabled" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->君士坦丁堡<!--]--></span></div></div><!--]--></div><details class="details custom-block" data-v-41edf78e><summary data-v-41edf78e>Show Code</summary><div class="language-vue vp-adaptive-theme" data-v-41edf78e><button title="Copy Code" class="copy" data-v-41edf78e></button><span class="lang" data-v-41edf78e>vue</span><pre class="shiki github-dark vp-code-dark" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>setup</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>lang</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>import</span><span style="color:#E1E4E8;" data-v-41edf78e> { ref } </span><span style="color:#F97583;" data-v-41edf78e>from</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>options</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>value</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span><span style="color:#79B8FF;" data-v-41edf78e>2</span><span style="color:#E1E4E8;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  &lt;</span><span style="color:#FDAEB7;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:options</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>v-model:value</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>disabled</span><span style="color:#E1E4E8;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>setup</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>lang</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>import</span><span style="color:#24292E;" data-v-41edf78e> { ref } </span><span style="color:#D73A49;" data-v-41edf78e>from</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#032F62;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>options</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>value</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span><span style="color:#005CC5;" data-v-41edf78e>2</span><span style="color:#24292E;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  &lt;</span><span style="color:#B31D28;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:options</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>v-model:value</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>disabled</span><span style="color:#24292E;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span></code></pre></div></details><h2 id="禁用选项" tabindex="-1" data-v-41edf78e>禁用选项 <a class="header-anchor" href="#禁用选项" aria-label="Permalink to &quot;禁用选项&quot;" data-v-41edf78e>​</a></h2><div class="m-checkbox" style="max-width: auto; max-height: auto;" data-v-2a033f18 data-v-41edf78e><!--[--><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->北京市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box disabled" data-v-2a033f18><span class="u-checkbox u-checkbox-checked" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->纽约市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->布宜诺斯艾利斯<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->伊斯坦布尔<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->拜占庭<!--]--></span></div></div><div class="m-checkbox-wrap" style="" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->君士坦丁堡<!--]--></span></div></div><!--]--></div><details class="details custom-block" data-v-41edf78e><summary data-v-41edf78e>Show Code</summary><div class="language-vue vp-adaptive-theme" data-v-41edf78e><button title="Copy Code" class="copy" data-v-41edf78e></button><span class="lang" data-v-41edf78e>vue</span><pre class="shiki github-dark vp-code-dark" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>setup</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>lang</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>import</span><span style="color:#E1E4E8;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#F97583;" data-v-41edf78e>from</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>optionsDisabled</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>2</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        disabled: </span><span style="color:#79B8FF;" data-v-41edf78e>true</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>value</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span><span style="color:#79B8FF;" data-v-41edf78e>2</span><span style="color:#E1E4E8;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#B392F0;" data-v-41edf78e>watchEffect</span><span style="color:#E1E4E8;" data-v-41edf78e>(() </span><span style="color:#F97583;" data-v-41edf78e>=&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  console.</span><span style="color:#B392F0;" data-v-41edf78e>log</span><span style="color:#E1E4E8;" data-v-41edf78e>(</span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  &lt;</span><span style="color:#FDAEB7;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:options</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;optionsDisabled&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>v-model:value</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>setup</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>lang</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>import</span><span style="color:#24292E;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#D73A49;" data-v-41edf78e>from</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#032F62;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>optionsDisabled</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>2</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        disabled: </span><span style="color:#005CC5;" data-v-41edf78e>true</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>value</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span><span style="color:#005CC5;" data-v-41edf78e>2</span><span style="color:#24292E;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#6F42C1;" data-v-41edf78e>watchEffect</span><span style="color:#24292E;" data-v-41edf78e>(() </span><span style="color:#D73A49;" data-v-41edf78e>=&gt;</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  console.</span><span style="color:#6F42C1;" data-v-41edf78e>log</span><span style="color:#24292E;" data-v-41edf78e>(</span><span style="color:#032F62;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#24292E;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  &lt;</span><span style="color:#B31D28;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:options</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;optionsDisabled&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>v-model:value</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#24292E;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span></code></pre></div></details><h2 id="实现全选效果" tabindex="-1" data-v-41edf78e>实现全选效果 <a class="header-anchor" href="#实现全选效果" aria-label="Permalink to &quot;实现全选效果&quot;" data-v-41edf78e>​</a></h2><div class="m-checkbox mb10" style="max-width:auto;max-height:auto;" data-v-2a033f18 data-v-41edf78e><div class="m-checkbox-wrap" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox indeterminate" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->Check All<!--]--></span></div></div></div><br data-v-41edf78e><div class="m-checkbox" style="max-width: auto; max-height: auto;" data-v-2a033f18 data-v-41edf78e><!--[--><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->北京市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox u-checkbox-checked" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->纽约市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->布宜诺斯艾利斯<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->伊斯坦布尔<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->拜占庭<!--]--></span></div></div><div class="m-checkbox-wrap" style="" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->君士坦丁堡<!--]--></span></div></div><!--]--></div><details class="details custom-block" data-v-41edf78e><summary data-v-41edf78e>Show Code</summary><div class="language-vue vp-adaptive-theme" data-v-41edf78e><button title="Copy Code" class="copy" data-v-41edf78e></button><span class="lang" data-v-41edf78e>vue</span><pre class="shiki github-dark vp-code-dark" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>setup</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>lang</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>import</span><span style="color:#E1E4E8;" data-v-41edf78e> { ref, watch, watchEffect, computed } </span><span style="color:#F97583;" data-v-41edf78e>from</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>options</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>value</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span><span style="color:#79B8FF;" data-v-41edf78e>2</span><span style="color:#E1E4E8;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#B392F0;" data-v-41edf78e>watchEffect</span><span style="color:#E1E4E8;" data-v-41edf78e>(() </span><span style="color:#F97583;" data-v-41edf78e>=&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  console.</span><span style="color:#B392F0;" data-v-41edf78e>log</span><span style="color:#E1E4E8;" data-v-41edf78e>(</span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>checkAll</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>(</span><span style="color:#79B8FF;" data-v-41edf78e>false</span><span style="color:#E1E4E8;" data-v-41edf78e>) </span><span style="color:#6A737D;" data-v-41edf78e>// 全选v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>indeterminate</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>computed</span><span style="color:#E1E4E8;" data-v-41edf78e>(() </span><span style="color:#F97583;" data-v-41edf78e>=&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> { </span><span style="color:#6A737D;" data-v-41edf78e>// 全选样式控制</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  </span><span style="color:#F97583;" data-v-41edf78e>if</span><span style="color:#E1E4E8;" data-v-41edf78e> (value.value.</span><span style="color:#79B8FF;" data-v-41edf78e>length</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>0</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>&amp;&amp;</span><span style="color:#E1E4E8;" data-v-41edf78e> value.value.</span><span style="color:#79B8FF;" data-v-41edf78e>length</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>&lt;</span><span style="color:#E1E4E8;" data-v-41edf78e> options.value.</span><span style="color:#79B8FF;" data-v-41edf78e>length</span><span style="color:#E1E4E8;" data-v-41edf78e>) {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    </span><span style="color:#F97583;" data-v-41edf78e>return</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>true</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  } </span><span style="color:#F97583;" data-v-41edf78e>else</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    </span><span style="color:#F97583;" data-v-41edf78e>return</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>false</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  }</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#B392F0;" data-v-41edf78e>watch</span><span style="color:#E1E4E8;" data-v-41edf78e>(checkAll, (</span><span style="color:#FFAB70;" data-v-41edf78e>to</span><span style="color:#E1E4E8;" data-v-41edf78e>) </span><span style="color:#F97583;" data-v-41edf78e>=&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  console.</span><span style="color:#B392F0;" data-v-41edf78e>log</span><span style="color:#E1E4E8;" data-v-41edf78e>(</span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;checkAll:&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>, to)</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  </span><span style="color:#F97583;" data-v-41edf78e>if</span><span style="color:#E1E4E8;" data-v-41edf78e> (to) {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    value.value </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> options.value.</span><span style="color:#B392F0;" data-v-41edf78e>map</span><span style="color:#E1E4E8;" data-v-41edf78e>(</span><span style="color:#FFAB70;" data-v-41edf78e>option</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> option.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  } </span><span style="color:#F97583;" data-v-41edf78e>else</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    value.value </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> []</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  }</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  &lt;</span><span style="color:#FDAEB7;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>class</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;mb10&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:indeterminate</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;indeterminate&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>v-model:checked</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;checkAll&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;Check All&lt;/</span><span style="color:#FDAEB7;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  &lt;</span><span style="color:#85E89D;" data-v-41edf78e>br</span><span style="color:#E1E4E8;" data-v-41edf78e>/&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  &lt;</span><span style="color:#FDAEB7;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:options</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>v-model:value</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>style</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#B392F0;" data-v-41edf78e>.mb10</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  </span><span style="color:#79B8FF;" data-v-41edf78e>margin-bottom</span><span style="color:#E1E4E8;" data-v-41edf78e>: </span><span style="color:#79B8FF;" data-v-41edf78e>10</span><span style="color:#F97583;" data-v-41edf78e>px</span><span style="color:#E1E4E8;" data-v-41edf78e>;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>}</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>style</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>setup</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>lang</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>import</span><span style="color:#24292E;" data-v-41edf78e> { ref, watch, watchEffect, computed } </span><span style="color:#D73A49;" data-v-41edf78e>from</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#032F62;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>options</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>value</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span><span style="color:#005CC5;" data-v-41edf78e>2</span><span style="color:#24292E;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#6F42C1;" data-v-41edf78e>watchEffect</span><span style="color:#24292E;" data-v-41edf78e>(() </span><span style="color:#D73A49;" data-v-41edf78e>=&gt;</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  console.</span><span style="color:#6F42C1;" data-v-41edf78e>log</span><span style="color:#24292E;" data-v-41edf78e>(</span><span style="color:#032F62;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#24292E;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>checkAll</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>(</span><span style="color:#005CC5;" data-v-41edf78e>false</span><span style="color:#24292E;" data-v-41edf78e>) </span><span style="color:#6A737D;" data-v-41edf78e>// 全选v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>indeterminate</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>computed</span><span style="color:#24292E;" data-v-41edf78e>(() </span><span style="color:#D73A49;" data-v-41edf78e>=&gt;</span><span style="color:#24292E;" data-v-41edf78e> { </span><span style="color:#6A737D;" data-v-41edf78e>// 全选样式控制</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  </span><span style="color:#D73A49;" data-v-41edf78e>if</span><span style="color:#24292E;" data-v-41edf78e> (value.value.</span><span style="color:#005CC5;" data-v-41edf78e>length</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>&gt;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>0</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>&amp;&amp;</span><span style="color:#24292E;" data-v-41edf78e> value.value.</span><span style="color:#005CC5;" data-v-41edf78e>length</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>&lt;</span><span style="color:#24292E;" data-v-41edf78e> options.value.</span><span style="color:#005CC5;" data-v-41edf78e>length</span><span style="color:#24292E;" data-v-41edf78e>) {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    </span><span style="color:#D73A49;" data-v-41edf78e>return</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>true</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  } </span><span style="color:#D73A49;" data-v-41edf78e>else</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    </span><span style="color:#D73A49;" data-v-41edf78e>return</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>false</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  }</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#6F42C1;" data-v-41edf78e>watch</span><span style="color:#24292E;" data-v-41edf78e>(checkAll, (</span><span style="color:#E36209;" data-v-41edf78e>to</span><span style="color:#24292E;" data-v-41edf78e>) </span><span style="color:#D73A49;" data-v-41edf78e>=&gt;</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  console.</span><span style="color:#6F42C1;" data-v-41edf78e>log</span><span style="color:#24292E;" data-v-41edf78e>(</span><span style="color:#032F62;" data-v-41edf78e>&#39;checkAll:&#39;</span><span style="color:#24292E;" data-v-41edf78e>, to)</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  </span><span style="color:#D73A49;" data-v-41edf78e>if</span><span style="color:#24292E;" data-v-41edf78e> (to) {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    value.value </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> options.value.</span><span style="color:#6F42C1;" data-v-41edf78e>map</span><span style="color:#24292E;" data-v-41edf78e>(</span><span style="color:#E36209;" data-v-41edf78e>option</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=&gt;</span><span style="color:#24292E;" data-v-41edf78e> option.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  } </span><span style="color:#D73A49;" data-v-41edf78e>else</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    value.value </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> []</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  }</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  &lt;</span><span style="color:#B31D28;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>class</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;mb10&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:indeterminate</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;indeterminate&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>v-model:checked</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;checkAll&quot;</span><span style="color:#24292E;" data-v-41edf78e>&gt;Check All&lt;/</span><span style="color:#B31D28;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  &lt;</span><span style="color:#22863A;" data-v-41edf78e>br</span><span style="color:#24292E;" data-v-41edf78e>/&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  &lt;</span><span style="color:#B31D28;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:options</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>v-model:value</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#24292E;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>style</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#6F42C1;" data-v-41edf78e>.mb10</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  </span><span style="color:#005CC5;" data-v-41edf78e>margin-bottom</span><span style="color:#24292E;" data-v-41edf78e>: </span><span style="color:#005CC5;" data-v-41edf78e>10</span><span style="color:#D73A49;" data-v-41edf78e>px</span><span style="color:#24292E;" data-v-41edf78e>;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>}</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>style</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span></code></pre></div></details><h2 id="垂直排列" tabindex="-1" data-v-41edf78e>垂直排列 <a class="header-anchor" href="#垂直排列" aria-label="Permalink to &quot;垂直排列&quot;" data-v-41edf78e>​</a></h2><div class="m-checkbox" style="max-width: auto; max-height: auto;" data-v-2a033f18 data-v-41edf78e><!--[--><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->北京市<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox u-checkbox-checked" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->纽约市<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->布宜诺斯艾利斯<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->伊斯坦布尔<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->拜占庭<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->君士坦丁堡<!--]--></span></div></div><!--]--></div><details class="details custom-block" data-v-41edf78e><summary data-v-41edf78e>Show Code</summary><div class="language-vue vp-adaptive-theme" data-v-41edf78e><button title="Copy Code" class="copy" data-v-41edf78e></button><span class="lang" data-v-41edf78e>vue</span><pre class="shiki github-dark vp-code-dark" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>setup</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>lang</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>import</span><span style="color:#E1E4E8;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#F97583;" data-v-41edf78e>from</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>options</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>value</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span><span style="color:#79B8FF;" data-v-41edf78e>2</span><span style="color:#E1E4E8;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#B392F0;" data-v-41edf78e>watchEffect</span><span style="color:#E1E4E8;" data-v-41edf78e>(() </span><span style="color:#F97583;" data-v-41edf78e>=&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  console.</span><span style="color:#B392F0;" data-v-41edf78e>log</span><span style="color:#E1E4E8;" data-v-41edf78e>(</span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  &lt;</span><span style="color:#FDAEB7;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>vertical</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:options</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>v-model:value</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>setup</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>lang</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>import</span><span style="color:#24292E;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#D73A49;" data-v-41edf78e>from</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#032F62;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>options</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>value</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span><span style="color:#005CC5;" data-v-41edf78e>2</span><span style="color:#24292E;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#6F42C1;" data-v-41edf78e>watchEffect</span><span style="color:#24292E;" data-v-41edf78e>(() </span><span style="color:#D73A49;" data-v-41edf78e>=&gt;</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  console.</span><span style="color:#6F42C1;" data-v-41edf78e>log</span><span style="color:#24292E;" data-v-41edf78e>(</span><span style="color:#032F62;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#24292E;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  &lt;</span><span style="color:#B31D28;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>vertical</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:options</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>v-model:value</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#24292E;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span></code></pre></div></details><h2 id="自定义间距" tabindex="-1" data-v-41edf78e>自定义间距 <a class="header-anchor" href="#自定义间距" aria-label="Permalink to &quot;自定义间距&quot;" data-v-41edf78e>​</a></h2><div class="m-checkbox" style="max-width: auto; max-height: auto;" data-v-2a033f18 data-v-41edf78e><!--[--><div class="m-checkbox-wrap" style="margin-right:24px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->北京市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:24px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox u-checkbox-checked" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->纽约市<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:24px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->布宜诺斯艾利斯<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:24px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->伊斯坦布尔<!--]--></span></div></div><div class="m-checkbox-wrap" style="margin-right:24px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->拜占庭<!--]--></span></div></div><div class="m-checkbox-wrap" style="" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->君士坦丁堡<!--]--></span></div></div><!--]--></div><details class="details custom-block" data-v-41edf78e><summary data-v-41edf78e>Show Code</summary><div class="language-vue vp-adaptive-theme" data-v-41edf78e><button title="Copy Code" class="copy" data-v-41edf78e></button><span class="lang" data-v-41edf78e>vue</span><pre class="shiki github-dark vp-code-dark" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>setup</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>lang</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>import</span><span style="color:#E1E4E8;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#F97583;" data-v-41edf78e>from</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>options</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>value</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span><span style="color:#79B8FF;" data-v-41edf78e>2</span><span style="color:#E1E4E8;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#B392F0;" data-v-41edf78e>watchEffect</span><span style="color:#E1E4E8;" data-v-41edf78e>(() </span><span style="color:#F97583;" data-v-41edf78e>=&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  console.</span><span style="color:#B392F0;" data-v-41edf78e>log</span><span style="color:#E1E4E8;" data-v-41edf78e>(</span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  &lt;</span><span style="color:#FDAEB7;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:gap</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;24&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:options</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>v-model:value</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>setup</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>lang</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>import</span><span style="color:#24292E;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#D73A49;" data-v-41edf78e>from</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#032F62;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>options</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>value</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span><span style="color:#005CC5;" data-v-41edf78e>2</span><span style="color:#24292E;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#6F42C1;" data-v-41edf78e>watchEffect</span><span style="color:#24292E;" data-v-41edf78e>(() </span><span style="color:#D73A49;" data-v-41edf78e>=&gt;</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  console.</span><span style="color:#6F42C1;" data-v-41edf78e>log</span><span style="color:#24292E;" data-v-41edf78e>(</span><span style="color:#032F62;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#24292E;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  &lt;</span><span style="color:#B31D28;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:gap</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;24&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:options</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>v-model:value</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#24292E;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span></code></pre></div></details><h2 id="自定义展示区域宽高" tabindex="-1" data-v-41edf78e>自定义展示区域宽高 <a class="header-anchor" href="#自定义展示区域宽高" aria-label="Permalink to &quot;自定义展示区域宽高&quot;" data-v-41edf78e>​</a></h2><div class="m-checkbox" style="max-width: 110px; max-height: 150px;" data-v-2a033f18 data-v-41edf78e><!--[--><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->北京市<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox u-checkbox-checked" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->纽约市<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->布宜诺斯艾利斯<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->伊斯坦布尔<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="margin-bottom:8px;" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->拜占庭<!--]--></span></div></div><div class="m-checkbox-wrap vertical" style="" data-v-2a033f18><div class="m-box" data-v-2a033f18><span class="u-checkbox" data-v-2a033f18></span><span class="u-label" data-v-2a033f18><!--[-->君士坦丁堡<!--]--></span></div></div><!--]--></div><details class="details custom-block" data-v-41edf78e><summary data-v-41edf78e>Show Code</summary><div class="language-vue vp-adaptive-theme" data-v-41edf78e><button title="Copy Code" class="copy" data-v-41edf78e></button><span class="lang" data-v-41edf78e>vue</span><pre class="shiki github-dark vp-code-dark" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>setup</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>lang</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>import</span><span style="color:#E1E4E8;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#F97583;" data-v-41edf78e>from</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>options</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        label: </span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>        value: </span><span style="color:#79B8FF;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#F97583;" data-v-41edf78e>const</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#79B8FF;" data-v-41edf78e>value</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#F97583;" data-v-41edf78e>=</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>ref</span><span style="color:#E1E4E8;" data-v-41edf78e>([</span><span style="color:#79B8FF;" data-v-41edf78e>2</span><span style="color:#E1E4E8;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#B392F0;" data-v-41edf78e>watchEffect</span><span style="color:#E1E4E8;" data-v-41edf78e>(() </span><span style="color:#F97583;" data-v-41edf78e>=&gt;</span><span style="color:#E1E4E8;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  console.</span><span style="color:#B392F0;" data-v-41edf78e>log</span><span style="color:#E1E4E8;" data-v-41edf78e>(</span><span style="color:#9ECBFF;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#E1E4E8;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>script</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>  &lt;</span><span style="color:#FDAEB7;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>vertical</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:width</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;120&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:height</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;150&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>:options</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> </span><span style="color:#B392F0;" data-v-41edf78e>v-model:value</span><span style="color:#E1E4E8;" data-v-41edf78e>=</span><span style="color:#9ECBFF;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#E1E4E8;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#E1E4E8;" data-v-41edf78e>&lt;/</span><span style="color:#85E89D;" data-v-41edf78e>template</span><span style="color:#E1E4E8;" data-v-41edf78e>&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light" data-v-41edf78e><code data-v-41edf78e><span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>setup</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>lang</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;ts&quot;</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>import</span><span style="color:#24292E;" data-v-41edf78e> { ref, watchEffect } </span><span style="color:#D73A49;" data-v-41edf78e>from</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#032F62;" data-v-41edf78e>&#39;vue&#39;</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>options</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;北京市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>1</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;纽约市&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>2</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;布宜诺斯艾利斯&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>3</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;伊斯坦布尔&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>4</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;拜占庭&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>5</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      },</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        label: </span><span style="color:#032F62;" data-v-41edf78e>&#39;君士坦丁堡&#39;</span><span style="color:#24292E;" data-v-41edf78e>,</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>        value: </span><span style="color:#005CC5;" data-v-41edf78e>6</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>      }</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>    ])</span></span>
<span class="line" data-v-41edf78e></span>
<span class="line" data-v-41edf78e><span style="color:#D73A49;" data-v-41edf78e>const</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#005CC5;" data-v-41edf78e>value</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#D73A49;" data-v-41edf78e>=</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>ref</span><span style="color:#24292E;" data-v-41edf78e>([</span><span style="color:#005CC5;" data-v-41edf78e>2</span><span style="color:#24292E;" data-v-41edf78e>]) </span><span style="color:#6A737D;" data-v-41edf78e>// 多选框v-model</span></span>
<span class="line" data-v-41edf78e><span style="color:#6F42C1;" data-v-41edf78e>watchEffect</span><span style="color:#24292E;" data-v-41edf78e>(() </span><span style="color:#D73A49;" data-v-41edf78e>=&gt;</span><span style="color:#24292E;" data-v-41edf78e> {</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  console.</span><span style="color:#6F42C1;" data-v-41edf78e>log</span><span style="color:#24292E;" data-v-41edf78e>(</span><span style="color:#032F62;" data-v-41edf78e>&#39;value:&#39;</span><span style="color:#24292E;" data-v-41edf78e>, value.value)</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>})</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>script</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>  &lt;</span><span style="color:#B31D28;font-style:italic;" data-v-41edf78e>Checkbox</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>vertical</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:width</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;120&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:height</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;150&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>:options</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;options&quot;</span><span style="color:#24292E;" data-v-41edf78e> </span><span style="color:#6F42C1;" data-v-41edf78e>v-model:value</span><span style="color:#24292E;" data-v-41edf78e>=</span><span style="color:#032F62;" data-v-41edf78e>&quot;value&quot;</span><span style="color:#24292E;" data-v-41edf78e> /&gt;</span></span>
<span class="line" data-v-41edf78e><span style="color:#24292E;" data-v-41edf78e>&lt;/</span><span style="color:#22863A;" data-v-41edf78e>template</span><span style="color:#24292E;" data-v-41edf78e>&gt;</span></span></code></pre></div></details><h2 id="apis" tabindex="-1" data-v-41edf78e>APIs <a class="header-anchor" href="#apis" aria-label="Permalink to &quot;APIs&quot;" data-v-41edf78e>​</a></h2><table data-v-41edf78e><thead data-v-41edf78e><tr data-v-41edf78e><th data-v-41edf78e>参数</th><th data-v-41edf78e>说明</th><th data-v-41edf78e>类型</th><th data-v-41edf78e>默认值</th><th data-v-41edf78e>必传</th></tr></thead><tbody data-v-41edf78e><tr data-v-41edf78e><td data-v-41edf78e>options</td><td data-v-41edf78e>复选元素数据</td><td data-v-41edf78e>Option[]</td><td data-v-41edf78e>[]</td><td data-v-41edf78e>false</td></tr><tr data-v-41edf78e><td data-v-41edf78e>disabled</td><td data-v-41edf78e>是否禁用所有复选框</td><td data-v-41edf78e>boolean</td><td data-v-41edf78e>false</td><td data-v-41edf78e>false</td></tr><tr data-v-41edf78e><td data-v-41edf78e>vertical</td><td data-v-41edf78e>是否垂直排列</td><td data-v-41edf78e>boolean</td><td data-v-41edf78e>false</td><td data-v-41edf78e>false</td></tr><tr data-v-41edf78e><td data-v-41edf78e>value <div class="m-tag tag-middle tag-cyan" style="background-color: ;" data-v-239ed553 data-v-41edf78e><span class="m-icon" data-v-239ed553><!--[--><!--]--></span><span class="u-tag" data-v-239ed553><!--[-->v-model<!--]--></span><!----></div></td><td data-v-41edf78e>当前选中的值</td><td data-v-41edf78e>any[]</td><td data-v-41edf78e>[]</td><td data-v-41edf78e>false</td></tr><tr data-v-41edf78e><td data-v-41edf78e>gap</td><td data-v-41edf78e>多个单选框之间的间距，单位<code data-v-41edf78e>px</code>，垂直排列时，间距即垂直间距</td><td data-v-41edf78e>number</td><td data-v-41edf78e>8</td><td data-v-41edf78e>false</td></tr><tr data-v-41edf78e><td data-v-41edf78e>width</td><td data-v-41edf78e>复选区域最大展示宽度，超出后折行</td><td data-v-41edf78e>string | number</td><td data-v-41edf78e>&#39;auto&#39;</td><td data-v-41edf78e>false</td></tr><tr data-v-41edf78e><td data-v-41edf78e>height</td><td data-v-41edf78e>复选区域最大展示高度，超出后滚动</td><td data-v-41edf78e>string | number</td><td data-v-41edf78e>&#39;auto&#39;</td><td data-v-41edf78e>false</td></tr><tr data-v-41edf78e><td data-v-41edf78e>indeterminate</td><td data-v-41edf78e>全选时的样式控制</td><td data-v-41edf78e>boolean</td><td data-v-41edf78e>false</td><td data-v-41edf78e>false</td></tr><tr data-v-41edf78e><td data-v-41edf78e>checked <div class="m-tag tag-middle tag-cyan" style="background-color: ;" data-v-239ed553 data-v-41edf78e><span class="m-icon" data-v-239ed553><!--[--><!--]--></span><span class="u-tag" data-v-239ed553><!--[-->v-model<!--]--></span><!----></div></td><td data-v-41edf78e>是否全选</td><td data-v-41edf78e>boolean</td><td data-v-41edf78e>false</td><td data-v-41edf78e>false</td></tr></tbody></table><h2 id="option-type" tabindex="-1" data-v-41edf78e>Option Type <a class="header-anchor" href="#option-type" aria-label="Permalink to &quot;Option Type&quot;" data-v-41edf78e>​</a></h2><table data-v-41edf78e><thead data-v-41edf78e><tr data-v-41edf78e><th data-v-41edf78e>名称</th><th data-v-41edf78e>说明</th><th data-v-41edf78e>类型</th><th data-v-41edf78e>必传</th></tr></thead><tbody data-v-41edf78e><tr data-v-41edf78e><td data-v-41edf78e>label</td><td data-v-41edf78e>选项名</td><td data-v-41edf78e>string</td><td data-v-41edf78e>true</td></tr><tr data-v-41edf78e><td data-v-41edf78e>value</td><td data-v-41edf78e>选项值</td><td data-v-41edf78e>any</td><td data-v-41edf78e>true</td></tr><tr data-v-41edf78e><td data-v-41edf78e>disabled</td><td data-v-41edf78e>是否禁用选项</td><td data-v-41edf78e>boolean</td><td data-v-41edf78e>false</td></tr></tbody></table><h2 id="events" tabindex="-1" data-v-41edf78e>Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;" data-v-41edf78e>​</a></h2><table data-v-41edf78e><thead data-v-41edf78e><tr data-v-41edf78e><th data-v-41edf78e>事件名称</th><th data-v-41edf78e>说明</th><th data-v-41edf78e>参数</th></tr></thead><tbody data-v-41edf78e><tr data-v-41edf78e><td data-v-41edf78e>change</td><td data-v-41edf78e>变化时回调函数</td><td data-v-41edf78e>(value: any[]) =&gt; void</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/themusecatcher/vue-amazing-ui/tree/master/docs/guide/components/checkbox.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Suggest changes to this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/vue-amazing-ui/guide/components/cascader.html" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Previous page</span><span class="title" data-v-ef5dee53>级联选择 Cascader</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/vue-amazing-ui/guide/components/collapse.html" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Next page</span><span class="title" data-v-ef5dee53>折叠面板 Collapse</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the MIT License.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present The Muse Catcher</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_backtop.md\":\"8d59e5ad\",\"guide_components_alert.md\":\"ef6f8f48\",\"guide_components_breadcrumb.md\":\"482c3bc5\",\"guide_components_button.md\":\"0c5a0f79\",\"guide_components_carousel.md\":\"f258fe6f\",\"guide_components_card.md\":\"c68e6a5f\",\"guide_components_avatar.md\":\"7b3c0a95\",\"guide_components_badge.md\":\"7b61433a\",\"guide_components_collapse.md\":\"17577606\",\"guide_components_countdown.md\":\"8a4c2a3b\",\"guide_components_checkbox.md\":\"74f90463\",\"guide_components_divider.md\":\"75f2a0ba\",\"guide_components_cascader.md\":\"c8c329e6\",\"guide_components_ellipsis.md\":\"5287e379\",\"guide_components_descriptions.md\":\"afc14b99\",\"guide_components_drawer.md\":\"314b39d8\",\"guide_components_dialog.md\":\"768a622b\",\"guide_components_empty.md\":\"25520a92\",\"guide_components_datepicker.md\":\"5bc2ac50\",\"guide_components_flex.md\":\"d5bf2ccc\",\"guide_components_image.md\":\"0d11985e\",\"guide_components_message.md\":\"ee3fe55f\",\"guide_components_inputnumber.md\":\"97dfa1e5\",\"guide_components_modal.md\":\"bb094a92\",\"guide_components_notification.md\":\"53828092\",\"guide_components_numberanimation.md\":\"d76aa659\",\"guide_components_pagination.md\":\"0e67ccb2\",\"guide_components_input.md\":\"879a0fdf\",\"guide_components_grid.md\":\"2aab247d\",\"guide_components_qrcode.md\":\"a9bd1de1\",\"guide_components_popconfirm.md\":\"53774e5a\",\"guide_components_progress.md\":\"1c392827\",\"guide_components_radio.md\":\"27776e2a\",\"guide_components_rate.md\":\"69bc8cbd\",\"guide_components_result.md\":\"20535c7d\",\"guide_components_slider.md\":\"e58e30ce\",\"guide_components_space.md\":\"462fecd4\",\"guide_components_spin.md\":\"1299524e\",\"guide_components_select.md\":\"a8f1273f\",\"guide_components_steps.md\":\"ce8cdf58\",\"guide_components_statistic.md\":\"e51cdb04\",\"guide_components_swiper.md\":\"dbec3821\",\"guide_components_switch.md\":\"b970eb36\",\"guide_components_table.md\":\"58ff62a3\",\"guide_components_tabs.md\":\"c13abd94\",\"guide_components_textscroll.md\":\"910fdfb7\",\"guide_components_textarea.md\":\"586a2e33\",\"guide_components_tooltip.md\":\"b326ce75\",\"guide_components_timeline.md\":\"bacde90b\",\"guide_features.md\":\"79a293f3\",\"guide_components_tag.md\":\"d024f080\",\"guide_components_video.md\":\"3b23c86a\",\"guide_components_waterfall.md\":\"944087ee\",\"guide_started.md\":\"d0e94266\",\"index.md\":\"579e0bbd\",\"guide_components_upload.md\":\"9fbaefaa\",\"utils_add.md\":\"76c759f5\",\"utils_animation-frame.md\":\"9b0fe9ed\",\"utils_debounce.md\":\"3cccfb14\",\"utils_download-file.md\":\"dda24646\",\"utils_format-number.md\":\"17b9bf84\",\"utils_date-format.md\":\"31801aa3\",\"utils_started.md\":\"2223b04f\",\"utils_throttle.md\":\"4975c126\",\"utils_raf-timeout.md\":\"8fcee01e\",\"utils_toggle-dark.md\":\"324c6a33\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vue Amazing UI\",\"description\":\"Amazing UI 组件库\",\"base\":\"/vue-amazing-ui/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/amazing-icon.svg\",\"editLink\":{\"pattern\":\"https://github.com/themusecatcher/vue-amazing-ui/tree/master/docs/:path\",\"text\":\"Suggest changes to this page\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/themusecatcher/vue-amazing-ui\"}],\"algolia\":{\"appId\":\"SHDNEYGA8Z\",\"apiKey\":\"91419401b0b0efd31b610e54e5b97249\",\"indexName\":\"vue-amazing-ui\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023-present The Muse Catcher\"},\"nav\":[{\"text\":\"组件\",\"link\":\"/guide/features\",\"activeMatch\":\"/guide/\"},{\"text\":\"工具\",\"link\":\"/utils/started\",\"activeMatch\":\"/utils/\"},{\"text\":\"链接\",\"items\":[{\"text\":\"My Github\",\"link\":\"https://github.com/themusecatcher\"},{\"text\":\"My CSDN\",\"link\":\"https://blog.csdn.net/Dandrose?type=blog\"},{\"text\":\"Front-end Notes\",\"link\":\"https://themusecatcher.github.io/front-end-notes/\"},{\"items\":[{\"text\":\"vue\",\"link\":\"https://cn.vuejs.org/\"},{\"text\":\"vitepress\",\"link\":\"https://vitepress.dev/\"},{\"text\":\"markdown\",\"link\":\"https://markdown.com.cn/\"}]}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"指引\",\"items\":[{\"text\":\"特性\",\"link\":\"/guide/features\"},{\"text\":\"快速上手\",\"link\":\"/guide/started\"}]},{\"text\":\"组件\",\"items\":[{\"text\":\"警告提示 Alert\",\"link\":\"/guide/components/alert\"},{\"text\":\"头像 Avatar\",\"link\":\"/guide/components/avatar\"},{\"text\":\"回到顶部 BackTop\",\"link\":\"/guide/components/backtop\"},{\"text\":\"徽标数 Badge\",\"link\":\"/guide/components/badge\"},{\"text\":\"面包屑 Breadcrumb\",\"link\":\"/guide/components/breadcrumb\"},{\"text\":\"按钮 Button\",\"link\":\"/guide/components/button\"},{\"text\":\"卡片 Card\",\"link\":\"/guide/components/card\"},{\"text\":\"走马灯 Carousel\",\"link\":\"/guide/components/carousel\"},{\"text\":\"级联选择 Cascader\",\"link\":\"/guide/components/cascader\"},{\"text\":\"多选框 Checkbox\",\"link\":\"/guide/components/checkbox\"},{\"text\":\"折叠面板 Collapse\",\"link\":\"/guide/components/collapse\"},{\"text\":\"倒计时 Countdown\",\"link\":\"/guide/components/countdown\"},{\"text\":\"日期选择 DatePicker\",\"link\":\"/guide/components/datepicker\"},{\"text\":\"描述列表 Descriptions\",\"link\":\"/guide/components/descriptions\"},{\"text\":\"对话框 Dialog\",\"link\":\"/guide/components/dialog\"},{\"text\":\"分割线 Divider\",\"link\":\"/guide/components/divider\"},{\"text\":\"抽屉 Drawer\",\"link\":\"/guide/components/drawer\"},{\"text\":\"文本省略 Ellipsis\",\"link\":\"/guide/components/ellipsis\"},{\"text\":\"空状态 Empty\",\"link\":\"/guide/components/empty\"},{\"text\":\"弹性布局 Flex\",\"link\":\"/guide/components/flex\"},{\"text\":\"栅格 Grid\",\"link\":\"/guide/components/grid\"},{\"text\":\"图片 Image\",\"link\":\"/guide/components/image\"},{\"text\":\"输入框 Input\",\"link\":\"/guide/components/input\"},{\"text\":\"数字输入框 InputNumber\",\"link\":\"/guide/components/inputnumber\"},{\"text\":\"全局提示 Message\",\"link\":\"/guide/components/message\"},{\"text\":\"信息提示 Modal\",\"link\":\"/guide/components/modal\"},{\"text\":\"通知提醒 Notification\",\"link\":\"/guide/components/notification\"},{\"text\":\"数值动画 NumberAnimation\",\"link\":\"/guide/components/numberanimation\"},{\"text\":\"分页 Pagination\",\"link\":\"/guide/components/pagination\"},{\"text\":\"弹出确认 Popconfirm\",\"link\":\"/guide/components/popconfirm\"},{\"text\":\"进度条 Progress\",\"link\":\"/guide/components/progress\"},{\"text\":\"二维码 QRCode\",\"link\":\"/guide/components/qrcode\"},{\"text\":\"单选框 Radio\",\"link\":\"/guide/components/radio\"},{\"text\":\"评分 Rate\",\"link\":\"/guide/components/rate\"},{\"text\":\"结果 Result\",\"link\":\"/guide/components/result\"},{\"text\":\"选择器 Select\",\"link\":\"/guide/components/select\"},{\"text\":\"滑动输入条 Slider\",\"link\":\"/guide/components/slider\"},{\"text\":\"间距 Space\",\"link\":\"/guide/components/space\"},{\"text\":\"加载中 Spin\",\"link\":\"/guide/components/spin\"},{\"text\":\"统计数值 Statistic\",\"link\":\"/guide/components/statistic\"},{\"text\":\"步骤条 Steps\",\"link\":\"/guide/components/steps\"},{\"text\":\"触摸滑动插件 Swiper\",\"link\":\"/guide/components/swiper\"},{\"text\":\"开关 Switch\",\"link\":\"/guide/components/switch\"},{\"text\":\"表格 Table\",\"link\":\"/guide/components/table\"},{\"text\":\"标签页 Tabs\",\"link\":\"/guide/components/tabs\"},{\"text\":\"标签 Tag\",\"link\":\"/guide/components/tag\"},{\"text\":\"文本域 Textarea\",\"link\":\"/guide/components/textarea\"},{\"text\":\"文字滚动 TextScroll\",\"link\":\"/guide/components/textscroll\"},{\"text\":\"时间轴 Timeline\",\"link\":\"/guide/components/timeline\"},{\"text\":\"文字提示 Tooltip\",\"link\":\"/guide/components/tooltip\"},{\"text\":\"上传 Upload\",\"link\":\"/guide/components/upload\"},{\"text\":\"播放器 Video\",\"link\":\"/guide/components/video\"},{\"text\":\"瀑布流 Waterfall\",\"link\":\"/guide/components/waterfall\"}]}],\"/utils/\":[{\"text\":\"指引\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/utils/started\"}]},{\"text\":\"工具\",\"items\":[{\"text\":\"add 加法\",\"link\":\"/utils/add\"},{\"text\":\"raf 动画帧\",\"link\":\"/utils/animation-frame\"},{\"text\":\"date 日期格式化\",\"link\":\"/utils/date-format\"},{\"text\":\"debounce 防抖\",\"link\":\"/utils/debounce\"},{\"text\":\"downloadFile 下载文件\",\"link\":\"/utils/download-file\"},{\"text\":\"formatNumber 数字格式化\",\"link\":\"/utils/format-number\"},{\"text\":\"raf 定时器\",\"link\":\"/utils/raf-timeout\"},{\"text\":\"throttle 节流\",\"link\":\"/utils/throttle\"},{\"text\":\"toggleDark 切换暗黑\",\"link\":\"/utils/toggle-dark\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>